<div class="row">
    <div class="col-lg-12">
        <div class="card card-outline-info">
            <div class="card-header">
                <h4 class="m-b-0 text-white">Tree&Autocomplete</h4>
            </div>
            <div class="card-body">
                <div class="col-md-3">
                    <div [formGroup]="formGroup">
                        <mat-form-field>
                            <input matInput placeholder="数据查询" [matAutocomplete]="auto" formControlName="searchValue"
                                (keyup.enter)="getStatus()" (blur)="getStatus()">
                            <mat-autocomplete #auto="matAutocomplete">
                                <mat-option *ngFor="let item of filteredStatus" [value]="item">
                                    <span>{{ item }}</span>
                                </mat-option>
                            </mat-autocomplete>
                        </mat-form-field>
                    </div>
                    <div style="overflow:scroll;">
                        <nz-tree [(ngModel)]="nodes" [nzSearchValue]="newStatus" (nzOnSearchNode)="mouseAction($event)"
                            (nzClick)="mouseAction($event)">
                        </nz-tree>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card card-outline-info">
            <div class="card-header">
                <h4 class="m-b-0 text-white">Form</h4>
            </div>
            <div class="card-body">
                <op-user-search-bar (searchData)="getSearchData($event)"></op-user-search-bar>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card card-outline-info">
            <div class="card-header">
                <h4 class="m-b-0 text-white">Paginator</h4>
            </div>
            <div class="card-body">
                <!-- <button mat-button type="button" (click)="userDialogVisible = true">open user dialog</button>
                <op-dialog [width]="userDialogData.width" [title]="userDialogData.title" [visible]="userDialogVisible" (closeDialog)="userDialogVisible = false">
                    <span *ngFor="let item of users">
                        ID：{{item.id}}，Name：{{item.name}}
                        <br>
                    </span>
                    <br>
                    <div style="height:1000px">打开新的对话框:</div>
                    <br>
                    <button mat-button type="button" (click)="newDialogVisible = true">open new dialog</button>
                </op-dialog>
                <op-dialog [width]="newDialogData.width" [title]="newDialogData.title" [visible]="newDialogVisible" (closeDialog)="newDialogVisible = false">
                    <span *ngFor="let item of users">
                        Name：{{item.name}}
                        <br>
                    </span>
                </op-dialog> -->
                <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" [showFirstLastButtons]="true" (page)="page($event)">
                </mat-paginator>
            </div>
        </div>
    </div>
</div>

<!-- <div class="box-card">
    <el-button [plain]="true" (click)="handle3('success')">成功</el-button>
    <el-button [plain]="true" (click)="handle3('warning')">警告</el-button>
    <el-button [plain]="true" (click)="handle3('info')">消息</el-button>
    <el-button [plain]="true" (click)="handle3('error')">错误</el-button>
</div> -->